工作中使用javascript的一些小结

不知不觉，正式工作马上两年了，待了两家公司，做过的项目也不少了，总结一下自己在写代码上的经验累积。

1. 确定变量的类型

不要使用==，使用===

JS是弱类型语言，类型检查不严格。在判断两个变量是否相等的时候，使用==会进行隐式的类型转换。比如：

['a'] == 'a'; // true;
1 == '1'; // true;

在前端项目日益复杂的今天，早已不再是后端吐出数据，前端直接展示就行了。一些计算是需要放在前端进行的。前端要进行计算，那么变量的类型在整个过程中，就必须是明确的。不然很容易出一些bug。举个最简单的例子，

var a = '0.1'; 
var b;
if(a == 0.1) {
    b = a.toFixed(3); // 出错，因为字符串没有toFixed方法。
}

多使用const声明变量

声明一个变量的时候，首先明确这个变量的类型，用const 进行声明。这样后续写代码过程中，能够清晰的知道这个变量的类型，避免对变量进行不合法的操作或者一不小心对变量进行了修改，出现bug。并且，一开始使用const声明变量，后续review代码时，思路能稍微清晰一点(这个变量就是用来干这个事情的，它是不会改变的)。而let用来声明一些根据判断条件会发生变化的变量。

使用大写的变量名来定义常量

使用const来声明变量后，那用什么来声明常量，并且可以避免和const声明的变量混淆呢？可以采用大写变量名来声明常量。比如圆周率

const PI =3.1415926535;

在代码中，看到名字大写的变量是，我就知道了，这是一个全局的常量。

2. 多使用纯函数

纯函数，就是不会产生副作用的函数。举一个例子，

const fn = arr => { // 非纯函数
    arr.push(1);
}

const pureFn = arr => {  // 纯函数
    return [].slice.call(arr).push(1);
}

const oldArr = [2,3];
fn(oldArr); // fn修改了原数组，不纯

const newArr = pureFn(oldArr); // pureFn返回了一个新数组，没有修改原数组。

使用纯函数的好处是，函数的输出仅仅依赖输入，不会受外部条件影响，并且不会影响到外部的环境。调试代码时，可以以函数为单位来验证、测试。

像上面的例子，我们在函数fn中修改了oldArr, 如果我们在另外一个地方又需要操作oldArr的时候, 我们能100%的保证知道这个oldArr已经被修改过了嘛？当业务逻辑变得复杂的时候，我们很容易就忽略了这个问题，导致出现莫名其妙的bug。而纯函数就不会有这种问题，我们只需要关注其输入和输出就行。

再考虑一种情况，在使用vue或者react进行开发的时候，经常会遇到我明明更新了这个数组，可是页面没有重新渲染的问题。这是因为，vue和react在进行数据的diff时，对于数组(引用数据类型)，都没有采用深比较。如果我仅仅只改变了数组中的一个元素时，数组其实并没有变化，vue和react发现没有diff，当然不会重新渲染。使用纯函数就不会有这个问题，因为每次都是返回一个全新的数组。

3. 函数中尽量避免if、else的嵌套

if 、else是十分常见的一种逻辑。如果在代码中，出现了复杂的嵌套，会降低代码可读性，并且容易出错。比如下面的代码：

function fn (a,b,c){
    if(a>1){
        if(b === c){
            return true;
        } else {
            return false;
        }
    } else {
        return true;
    }
}

以上代码可以改写为，避免了多层的嵌套，代码的可读性得到了增强。

function fn(a,b,c){
    if(a <= 1) {
        return true;
    }
    if(b === c){
        return true;
    }
    return false;
}

同时，还可以多使用短路，减少if 、 else的使用

var b;
if(condition) {
    b = 1;
}

// 可以改写成
var b;
condition && (b = 1);

4. 熟练使用数组的各种操作方法

Array.forEach、Array.map、Array.filter、Array.reduce等等，都是特别好用的数组操作方法，几乎可以满足各种的遍历需要了，比for循环来得优雅。

• Array.forEach仅对原数组进行一次遍历。
• Array.map对原数组进行遍历，返回一个新数组。
• Array.filter对原数组进行过滤，同时返回一个新数组。
• Array.reduce对原数组进行一次遍历，可以进行累加。

但其实for循环有一个以上方法都没有的优点，for循环可以随时中止数组的遍历，break一下就行。

可以根据不同场景采用不同的遍历方法。

5. 减少对jQuery、zepto的依赖，积累自己的小工具库

如今写代码已经很少使用jQuery和zepto了。jQuery和zepto确实给我们带来了很大的方便，但很多时候，使用jQuery或者zepto只是为了使用选择器，发送请求，简单动画。选择器完全可以用querySelector等代替了，发送网络请求，不管是ajax或者jsonp，自己封装一个就行，没有必要为了这一个功能，引入一个完整的jQuery或zepto。当然，使用专门的http请求库也是很好的选择。简单动画使用css3就可以完成了，并不需要使用js操作DOM。

在业务中，一些经常使用的小的功能，比如获取dom元素距离页面顶部的高度，获取url中的参数，判断变量类型，函数防抖，函数节流等等，完全可以封装进自己的小工具库，在多个项目中使用。

写在最后

工作时间还不够长，代码量也还不够，对于javascript的一些高级应用，编程技巧，各种设计模式在项目中的应用，项目的整体架构等还没有很深入的理解，react、vue等框架也只是会用而已，并没有很深入的研究。

以上总结仅仅是个人对于工作中的一些细节上的经验之谈。欢迎交流。